Google Charts API তে Click Event এবং Data Selection Event ব্যবহারের মাধ্যমে আপনি চার্টের উপর ক্লিক করলে বা কোন ডেটা নির্বাচন করলে কিছু অ্যাকশন ট্রিগার করতে পারেন। এই ইভেন্টগুলোর মাধ্যমে আপনি ইউজার ইন্টারঅ্যাকশনকে আরও ইন্টারঅ্যাকটিভ এবং ডায়নামিক করতে পারেন।

নিচে Chart Click Event এবং Data Selection Event এর ব্যবহার দেখানো হলো:

1. Chart Click Event

Chart Click Event ব্যবহার করে আপনি যখন চার্টের কোনো একটি পয়েন্টে ক্লিক করবেন, তখন তার সাথে সম্পর্কিত ডেটা বা একটি নির্দিষ্ট কার্যকলাপ ট্রিগার করতে পারবেন।

উদাহরণ (Click Event):

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Google Charts - Click Event Example';

  chartType = 'PieChart';  // Chart Type: PieChart
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ];  // Initial Data

  chartOptions = {
    title: 'My Daily Activities',
    pieHole: 0.4,  // Doughnut Style
    width: 600,
    height: 400
  };

  // Chart Click Event Handler
  onChartClick(event) {
    const selectedItem = event;
    if (selectedItem) {
      const itemIndex = selectedItem.row;
      alert(`You clicked on: ${this.chartData[itemIndex][0]} - ${this.chartData[itemIndex][1]} hours`);
    }
  }
}

HTML (app.component.html):

<h1>{{ title }}</h1>

<!-- Google Chart with Click Event -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions"
  (chartClick)="onChartClick($event)">
</google-chart>

এখানে কী ঘটছে:

• onChartClick ফাংশনটি chartClick ইভেন্টের মাধ্যমে কল করা হবে, যা তখন ঘটবে যখন ইউজার কোনো পয়েন্টে ক্লিক করবেন।
• event পারামিটারটি চার্টের ক্লিক করা পয়েন্টের তথ্য সরবরাহ করবে।
• itemIndex দিয়ে ক্লিক করা পয়েন্টের ডেটা পাওয়া যাবে, এবং সেই ডেটার সাথে একটি alert বার্তা প্রদর্শিত হবে।

2. Data Selection Event

Data Selection Event ব্যবহার করে আপনি যখন ইউজার কোনো চার্টের ডেটা নির্বাচন করবেন (যেমন একটি পয়েন্ট বা সেগমেন্ট), তখন ওই ডেটার উপর ভিত্তি করে একটি অ্যাকশন ট্রিগার করতে পারেন।

উদাহরণ (Data Selection Event):

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Google Charts - Data Selection Example';

  chartType = 'PieChart';  // Chart Type: PieChart
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ];  // Initial Data

  chartOptions = {
    title: 'My Daily Activities',
    pieHole: 0.4,  // Doughnut Style
    width: 600,
    height: 400
  };

  // Data Selection Event Handler
  onDataSelection(event) {
    const selectedItem = event.selection;
    if (selectedItem.length > 0) {
      const itemIndex = selectedItem[0].row;
      alert(`You selected: ${this.chartData[itemIndex][0]} - ${this.chartData[itemIndex][1]} hours`);
    }
  }
}

HTML (app.component.html):

<h1>{{ title }}</h1>

<!-- Google Chart with Data Selection Event -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions"
  (chartSelection)="onDataSelection($event)">
</google-chart>

এখানে কী ঘটছে:

• onDataSelection ফাংশনটি chartSelection ইভেন্টের মাধ্যমে কল করা হবে, যা তখন ঘটবে যখন ইউজার চার্টে কোন পয়েন্ট বা সেগমেন্ট সিলেক্ট করবেন।
• event.selection দ্বারা ইউজারের নির্বাচিত ডেটা পাওয়া যাবে।
• itemIndex দিয়ে সিলেক্ট করা সেগমেন্ট বা পয়েন্টের ডেটা বের করা হবে, এবং সেই ডেটার সাথে একটি alert বার্তা প্রদর্শিত হবে।

Chart Click এবং Data Selection Event এর মধ্যে পার্থক্য

সারাংশ

Chart Click Event এবং Data Selection Event ব্যবহার করে আপনি Google Charts-এ ইউজারের ইন্টারঅ্যাকশনকে আরো ইন্টারঅ্যাকটিভ করতে পারেন। যখন ইউজার চার্টে কোন পয়েন্টে ক্লিক করবেন বা নির্বাচন করবেন, তখন আপনি সেই তথ্য অনুযায়ী কিছু কার্যকলাপ চালাতে পারবেন। এগুলি ডেটা ভিজুয়ালাইজেশন অ্যাপ্লিকেশনগুলোতে ইউজারের কাছে আরও তথ্যপূর্ণ এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা প্রদান করতে সহায়তা করে।